<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchManagerChatListAPI } from '@/apis/fetchManagerChatList'

const router = useRouter()
const userInfoStore = useUserInfoStore()

// 班级 id
const classId = ref('')

// 班级标题与封面
const classInfo = ref({
  title: '',
  images: '',
})

// 消息分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore, refresh } = useLoadMore<LoadMoreData<Chat>>(
  fetchChats,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

onLoad((options) => {
  if (options && options.class_id) {
    classId.value = options.class_id
    refresh()
  }
  else { uni.showToast({ title: '页面加载错误：未获取到班级id', icon: 'none' }) }
})
onShow(() => refresh())
onReachBottom(() => loadMore())

/**
 * @description 分页服务函数
 */
async function fetchChats(d?: LoadMoreData<Chat>): Promise<LoadMoreData<Chat>> {
  // 缺少必要参数，先不执行
  if (!classId.value)
    return { list: [], page: 0, total: 0 }

  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchManagerChatListAPI({
    id: classId.value,
    page: _page.toString(),
    limit: '10',
  }, userInfoStore.userInfo!.token!)

  classInfo.value = {
    title: res.data?.data.class_info.title || '',
    images: res.data?.data.class_info.images || '',
  }

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

/**
 * 点击会话 item 时触发
 */
function handleTapChatItem(chat: Chat) {
  router.push({
    name: 'managerChat',
    params: {
      chat_id: chat.id.toString(),
      class_id: classId.value,
      student_id: chat.recover_user_id.toString(),
      username: chat.recover_username,
    },
  })
}
</script>

<template>
  <view class="min-h-screen bg-#F8FAFE">
    <!-- 头部 START -->
    <view class="flex items-center bg-white px-25rpx py-32rpx">
      <image
        class="h-100rpx w-100rpx flex-shrink-0 rounded-10rpx bg-#F8FAFE"
        :src="withDomain(classInfo.images)"
      />
      <Spacer width="20" />
      <view class="text-32rpx text-#333333 font-medium leading-44rpx">
        {{ classInfo.title }}
      </view>
    </view>
    <!-- 头部 END -->
    <Spacer height="20" />
    <!-- 聊天 Item START -->
    <view v-for="chat in dataList" :key="chat.id" class="mb-20rpx flex items-start bg-white px-25rpx py-32rpx" @tap="handleTapChatItem(chat)">
      <image class="h-90rpx w-90rpx flex-shrink-0 rounded-full bg-#F8FAFE" :src="chat.recover_avatar" />
      <Spacer width="16" />
      <view class="pt-8rpx">
        <view class="text-28rpx text-#333333 font-medium leading-40rpx">
          {{ chat.recover_username }}
        </view>
        <view class="text-24rpx text-#919191 leading-32rpx">
          {{ chat.create_time }}
        </view>
        <Spacer height="20" />
        <view class="text-26rpx text-#333333 leading-40rpx">
          {{ chat.content }}
        </view>
      </view>
    </view>
    <!-- 聊天 Item END -->
    <Spacer height="240" />
    <!-- 加载更多 -->
    <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  </view>
  <PageDefault v-if="dataList.length === 0">
    暂无留言
  </PageDefault>
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'managerChatList'
style:
  navigationBarTitleText: '留言列表'
layout: 'custom'
</route>
